<template>
    <flexbox class="tasktype-wrap">
        <my-icon :type="getTypeObj.icon" :class="[status === '1' ? 'icon-cont' : 'icon', getTypeObj.colorType ? getTypeObj.colorType + '-color' : '']" />
        <span class="title">{{ getTypeObj.title }}</span>
    </flexbox>
</template>

<script lang="ts">
import { defineComponent, computed } from 'vue';
export default defineComponent({
    props: {
        status: String
    },
    setup(props) {
        const requireTypeFilter = (type: string | undefined) => {
            switch (type) {
                case '1':
                    return { title: '待处理', icon: 'icondaichuli' };
                case '1.1':
                    return { title: '待设计转化', icon: 'iconxingzhuangjiehe', colorType: 'success' };
                case '1.2':
                    return { title: '待排期', icon: 'iconpaiqi', colorType: 'warning' };
                case '2':
                    return { title: '进行中', icon: 'iconpause-circle', colorType: 'primary' };
                default:
                    return { title: '', icon: 'iconleixing-quexian', colorType: 'error' };
            }
        };
        const getTypeObj = computed(() => {
            return requireTypeFilter(props.status);
        });
        return { getTypeObj };
    }
});
</script>
<style lang="less" scoped>
.icon {
    width: 20px;
    height: 20px;
    font-size: 14px;
    display: flex;
    align-items: center;
}
.icon-cont {
    width: 20px;
    height: 20px;
    font-size: 18px;
    display: flex;
    align-items: center;
}
.title {
    font-size: 12px;
    color: #70798b;
}
</style>


